<script lang="ts" setup>
import { userCouponDetailOrderTableCol } from '@/api/user/types/user'
import { userCouponType } from '@/types/enum'

defineProps<{
  data: userCouponDetailOrderTableCol[]
}>()
const statusHtml = (status: userCouponType) => {
  switch (status) {
    case '0':
      return `<span style="color:#EEEEEE">待生效</span>`
    case '1':
      return `<span style="color:var(--xy-warning-color)">待使用</span>`
    case '2':
      return `<span style="color:var(--xy-grey-text-color)">已使用</span>`
    case '3':
      return `<span style="color:var(--xy-light-color)">已失效</span>`
  }
}
</script>

<template>
  <el-table :data="data" class="no-border">
    <el-table-column prop="userPhone" label="手机号" align="center" />
    <el-table-column prop="couponName" label="卡券名称" align="center" />
    <el-table-column prop="usageScope" label="适用范围" show-overflow-tooltip align="center" />
    <el-table-column prop="expiryDate" label="有效期" align="center" />
    <el-table-column prop="status" label="状态" align="center">
      <template #default="scope">
        <span v-html="statusHtml(scope.row.status)" />
      </template>
    </el-table-column>
    <el-table-column prop="usageCondition" label="使用门槛" align="center" />
    <el-table-column prop="count" label="张数" align="center" />
  </el-table>
</template>

<style scoped></style>
